const loadingMap = function(arr) {
    let container = e('#id-div-container')
    let t = mapTemplate(arr)
    container.insertAdjacentHTML('beforeend', t)
}
const reloadMap = function(arr) {
    let map = findMap()
    map.remove()
    bubbleMapArray()
    deleteLine(arr)
    loadingMap(arr)
}
const initMap = function(mapArray) {
    loadingMap(mapArray)
}

const cellPosition = function(element) {
    let lines = es('.line')
    for (let i = 0; i < lines.length; i++) {
        for (let j = 0; j < lines[i].children.length; j++) {
            let child = lines[i].children[j]
            if (element === child) {
                return [i, j]
            }
        }
    }
}
const findMap = function() {
    let container = e('#id-div-container')
    return container.querySelector('#id-div-map')
}
const findCell = function([x, y]) {
    let map = findMap()
    let cell = map.children[x].children[y]
    return cell
}
const positionIsValid = function([i, j]) {
    let map = findMap()
    let len1 = map.children.length
    let len2 = map.children[0].children.length
    let isValid = i >= 0 && i < len1 && j >= 0 && j < len2
    return isValid
}
const checkEqual = function([x1, y1], [x2, y2]) {
    if (positionIsValid([x1, y1]) && positionIsValid([x2, y2])) {
        let a = mapArray[x1][y1]
        let b = mapArray[x2][y2]
        return a === b
    }
    return false

}
const subArray = function(positions, position) {
    for (let i = 0; i < positions.length; i++) {
        let s1 = JSON.stringify(positions[i])
        let s2 = JSON.stringify(position)
        if (s1 === s2) {
            return true
        }
    }
    return false
}
const left = function(a1, a2) {

}
const aroundPositions = function([x, y]) {
    let a = [
        [x - 1, y],
        [x + 1, y],
        [x, y - 1],
        [x, y + 1],
    ]
    return a
}
const aroundEqualPositions = function(arr, positions = []) {
    let around = aroundPositions(arr)
    for (let i = 0; i < around.length; i++) {
        let isEqual = checkEqual(arr, around[i])
        if (isEqual && !subArray(positions, around[i])) {
            positions.push(around[i])
            aroundEqualPositions(around[i], positions)
        }
    }
    return positions
}


const bubbleCell = function(arr) {
    for (let i = 0; i < arr.length; i++) {
        for (let j = 0; j < arr.length - 1; j++) {
            let canExchange = arr[j] !== 0 && arr[j + 1] === 0
            if (canExchange) {
                let tmp = arr[j]
                arr[j] = arr[j + 1]
                arr[j + 1] = tmp
            }
        }
    }
}
const bubbleMapArray = function() {
    for (let i = 0; i < mapArray.length; i++) {
        bubbleCell(mapArray[i])
    }
}
const deleteCell = function(arr) {
    let positions = aroundEqualPositions(arr)
    let len = positions.length
    if (len > 0) {
        for (let i = 0; i < len; i++) {
            let [x, y] = positions[i]
            mapArray[x][y] = 0
        }
        reloadMap(mapArray)
    }
}
const arraySum = function(arr) {
    let sum = 0
    for (let i = 0; i < arr.length; i++) {
        sum += arr[i]
    }
    return sum
}
const bubbleLine = function(arr) {
    for (let i = 0; i < arr.length; i++) {
        for (let j = 0; j < arr.length - 1; j++) {
            let canExchange = arraySum(arr[j]) === 0 && arraySum(arr[j + 1]) !== 0
            if (canExchange) {
                let tmp = arr[j]
                arr[j] = arr[j + 1]
                arr[j + 1] = tmp
            }
        }
    }
}
const deleteLine = function(arr) {
    for (let i = 0; i < arr.length; i++) {
        bubbleLine(arr)
    }
}
const resortMapArray = function() {

}
const bindEventDelegate = function() {
    let container = e('#id-div-container')
    container.addEventListener('click', function(event) {
        let target = event.target
        if (target.classList.contains('cell')) {
            let p = cellPosition(target)
            if (mapArray[p[0]][p[1]] !== 0) {
                deleteCell(p)
            }

        }
    })
}
const bindEvents = function() {
    bindEventDelegate()
}
const __main = function() {
    initMap(mapArray)
    bindEvents()
}
__main()